<template>
	<view>

		<view class="content" v-if="!pageLoading">
			<view class="top">
				<u-navbar scrollable=false :placeholder='true' bgColor="#ffffff" :autoBack="true" title="">
					<!-- <view slot="right" class="input_right flex">
						<u-input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
							customStyle="background-color: #f5f5f5;" suffixIconStyle="color: #909399" border=""
							v-model="inputValue" >
						</u-input>
						<image src="/static/images/search/share.png" style="height: 48rpx;width: 48rpx;margin: 0 32rpx;"
							mode=""></image>
						<image src="/static/images/search/more.png"
							style="width: 48rpx;height: 48rpx;margin-right: 32rpx;position: relative;" mode=""></image>
						<view class="" v-show="showmodel" style="position: absolute;right: 40rpx;top: 80rpx;">
							<view class="li flex"
								style="line-height: 96rpx; width: 288rpx;height: 96rpx; background-color: white;">
		
								<text>首页</text>
							</view>
							<view class="li flex"
								style="line-height: 96rpx; width: 288rpx;height: 96rpx; background-color: white;">
		
								<text>购物车</text>
							</view>
							<view class="li flex"
								style="line-height: 96rpx; width: 288rpx;height: 96rpx; background-color: white;">
								<text>消息</text>
							</view>
							<view class="li flex"
								style="line-height: 96rpx; width: 288rpx;height: 96rpx; background-color: white;">
		
								<text>反馈/举报</text>
							</view>
						</view>
					</view> -->
				</u-navbar>
			</view>
			<!-- 商品失效 -->
			<view class="padding32" v-if="code==208">
				<view class="flexcenter flexRowCenter" style="height: 500rpx;">
					商品已失效
				</view>
				<List :list="shixiaoTuijianList" v-if="shixiaoTuijianList.length>0"></List>
			</view>
			<!-- 未失效 -->
			<view v-else>
				<!-- 轮播图 -->
				<view class="swiper relative" v-if="swiperList.length>0">
					<u-swiper :autoplay="false" :list="swiperList" height="750rpx" radius="0rpx" keyName='image'
						@change="e => swiperCurrent = e.current+1">
					</u-swiper>
					<view class="flex">
						<view class="swiperLi cof absolute">
							{{swiperCurrent}}/{{swiperList.length}}
						</view>
					</view>
				</view>
				<!-- 发货与运费信息 -->
				<view class="container">
					<view class="whiteBox">
						<!-- 单独购买 -->
						<view class="price homeRed fw5  fontS40" style="margin: 16rpx 0;"
							v-if="info.is_start_wholesale==0">
							￥{{info.price}} <text v-if="info.end_price!=info.price"> - ￥{{info.end_price}}</text>
						</view>
						<!-- 批发 -->
						<view class="flexJBC mb24" v-if="info.is_start_wholesale">
							<view class="center" v-for="(item,index) in info.wholesale.setting_seller_data">
								<view class="homeRed fw8 fontS40">
									<text class="fontS22">￥</text>{{item.wholesale_price}}
								</view>
								<view class="fontS32 co6">
									<view v-if="index!=0">{{item.small_number}}-{{item.big_number}}件 </view>
									<view class="" v-else>{{item.small_number}}件起批</view>
								</view>

							</view>
						</view>
						<!-- <view class="price flex homeRed fw5  fontS40" style="margin: 16rpx 0;" v-if="info.is_start_wholesale">
							<text style="margin-right:4rpx;">￥{{info.wholesale.show_start_price}}</text> 
							<text v-if="info.wholesale.show_end_price!=info.wholesale.show_start_price"> -￥{{info.wholesale.show_end_price}}</text>
							<text class="co9 paddingLR24 fontS32">{{info.number_wholesale_nunber}}件起批</text>
						</view> -->
						<view style="line-height: 50rpx;">
							<view class="title fw6 fontS32">
								{{info.product_name}}
								<text style="float: right;font-weight: 400;" class="co9 fontS24">
									已售卖{{info.sales}}+
								</text>
							</view>
						</view>
					</view>
					<view class="whiteBox mt24">
						<view class="li fontS24 co9">
							<text style="margin-right: 20rpx;">发货</text><text
								class="fontS28 co3">{{info.delivery_address }}</text>
						</view>
						<view class="li  fontS24 co9 mt24">
							<text style="margin-right: 20rpx;">运费</text><text>￥{{info.free }} 预估</text>
						</view>
					</view>
					<!--商品评价 -->
					<view class="evaluate mb24"
						style="padding: 20rpx; background-color: white; margin-top: 24rpx; border-radius: 16rpx; ">
						<view class="co3 fontS28 flexJBC">
							<text>商品评价（{{findProductComment.total}}）</text>
							<u-icon name="arrow-right"
								@click="$my.go('/myPackageA/goodsAndFacton/evaluate/evaluate?type=2&id='+id)">
							</u-icon>
						</view>
						<view class="co9 fontS24" style="margin-top: 20rpx;" v-if="findProductComment.total==0">
							暂无有效评价
						</view>
						<view class="review  mt24" v-for="(item,index) in findProductComment.data" :key="index">
							<view class="li">
								<view class="li_box1 flexJBC">
									<view class="flex">
										<u-image :src="item.avatar" width='48rpx' height='48rpx' radius="24rpx">
										</u-image>
										<text class="name co9 fontS20"
											style="margin-left: 8rpx;">{{$my.hideName(item.nickname)}}</text>
									</view>
									<view class="">
										<u-rate readonly size="14" gutter="0" count="5" v-model="item.start"></u-rate>
									</view>
								</view>
								<view class="li_text" style="margin:8rpx 0 16rpx ;">
									{{item.comment_text}}
								</view>
								<!-- @click="$my.go('/myPackageA/goodsAndFacton/evaluate/comment?id='+item.id)" -->
								<view class="" @click="$my.go('/myPackageA/goodsAndFacton/evaluate/evaluate?type=2&id='+id)"
									style="padding: 0;">
									<view class="flex" style="flex-wrap: wrap;">
										<u-image
											:style="{marginRight:indexx==(4*indexx-1)?'0rpx':'17rpx',marginBottom:'20rpx'}"
											:src="itemm" width='144rpx' height='144rpx' radius="8rpx"
											v-for="(itemm,indexx) in item.image" :key="indexx" />
									</view>
								</view>
							</view>
						</view>
					</view>
					<!--  店铺信息 -->
					<view class="shop" v-if="info.store">
						<view class="li">
							<view class="li_top">
								<u-image style="" width="80rpx" height="80rpx" :src="info.store.store_image"
									radius="8rpx" />
								<view class="box_center">
									<view class="title co3 fw6">{{info.store.store_name}}</view>
									<view class="">
										<text class="score">{{info.store.postage_score}}分</text>
										<text class="deal co9">已成交{{info.store.pay_number}}</text>
									</view>
								</view>

								<view class="box_right"
									@click="$my.go(info.store.store_type==1?`/myPackageA/goodsAndFacton/store?store_id=${info.store_id}` : `/myPackageA/goodsAndFacton/store?store_id=${info.store_id}`)">
									<button class="entry fontS24">进店</button>
								</view>
							</view>
							<view class="li_center">
								<scroll-view @scroll="getstoreGoods(true)" scroll-x="true">
									<view class="flex" style="flex-wrap: nowrap;">
										<view v-for="(item, index) in info.store_product_data" :key="index"
											class="li_img">
											<u-image :src="item.image" width="190rpx" height="190rpx" radius="8rpx">
											</u-image>
											<view class="money">
												￥<text>{{item.price}}</text>
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>
				<!-- 商品详情 -->
				<view class="mb24" style="background-color: #f5f5f5;">
					<view class="padding32 fontS32 " style="color: #000;">
						商品详情
					</view>
					<rich-text :nodes="info.content"></rich-text>
				</view>
				<!-- 底部按钮 -->
				<view class="bottom flex">
					<view class="flex" style="margin-right: 10%;">
						<view class="flexcenter" @click="follow">
							<u-icon :name="info.focus?'star-fill':'star'" :color="info.focus?'#DD2131':'#666'"
								size="48rpx"></u-icon>
							<view>{{info.focus?'已收藏':'收藏'}}</view>
						</view>
						<view class="flexcenter" style="margin-left:48rpx;" @click="$my.go('/myPackageA/goodsAndFacton/kefu?id=' + item.id)">
							<u-icon name="server-man" size="48rpx" color="#666"></u-icon>
							<view>客服</view>
						</view>
					</view>
					<view class="bottom_btn flexJBC" style="flex: 1;">
						<u-button class="fontS28 fw5 cof add elipes1" @click="showModel=true;type=1" type="default">
							加入购物车
						</u-button>
						<u-button class="fontS28 fw5 cof topay " @click="showModel=true;type=2" type="default"
							customStyle="marginLeft:20rpx">立即下单</u-button>
					</view>
				</view>

				<!-- 加入购物车 和立即购买 -->
				<view class="slot_add" style="height: 80vh;padding-top: 30rpx;overflow: hidden;">
					<u-popup :show="showModel" @close="showModel=false" customStyle='min-height:80vh;padding-top:10rpx;overflow: hidden;' round='30rpx'
						mode="bottom" :closeable='true' >
						<scroll-view scroll-y="true" style="height:80vh;">
							<view>
								<view class="flexJBC" style="height:60vh;">
									<view class="left" style="height:60vh;" >
										<scroll-view scroll-y="true" style="height:100%;">
											<view class=" center paddingLR32" v-for="(item,index) in 10"
												:style="index==0?'background-color: #fff':'background-color:#f4f4f4'"
												style="padding: 12rpx 32rpx;">
												<image src="../../static/images/mine/icon2.jpg" mode=""
													style="width:96rpx;height: 96rpx;border-radius: 8rpx;"></image>
												<view class="">黄色</view>
											</view>
										</scroll-view>
									</view>
									<view class="right padding32" style="flex: 1;height:60vh;padding-top:15rpx;">
										<view class="flex" style="margin-bottom: 70rpx;">
											<image src="../../static/images/mine/icon2.jpg" mode="" style="width:240rpx;height: 240rpx;border-radius: 20rpx;"></image>
											<view class="" style="height: 240rpx;margin-left: 40rpx;">
												<view style="margin-bottom: 12rpx;" v-for="item in 3">
													<view>
														<text>￥</text>
														<text class="fontS40">80</text>
													</view>
													<view class="co9 fontS24">
														2-99件
													</view>
												</view>
											</view>
										</view>
										<view class="flexJBC" v-for="item in 3" style="margin-bottom: 50rpx;">
											<view class="">
												<view class="">
													S
												</view>
												<view class="co9 fontS24">
													库存1000
												</view>
											</view>
											<u-number-box
												:min="info.is_start_wholesale==0?1:info.number_wholesale_nunber"
												:max="1000" integer bgColor="#fff" inputWidth='80rpx'
												style='height: 48rpx;' v-model="num" @change='stepChange'>
											</u-number-box>
										</view>
									</view>
								</view>
								<view style="padding:40rpx 4%;" class="flexJBC">
									<view class="fontS24 co9">
										已选0种0个
									</view>
									<view class="flex">
										<view class="">
											商品金额：
										</view>
										<view class="homeRed fontS40">
											￥80
										</view>
									</view>
								</view>
								<view @click="addCartOrGoPay" style="margin:0rpx 4% 0rpx;">
									<u-button class="btn  fontS32 bgcred cof" customStyle="borderRadius:40rpx">
										确定
									</u-button>
								</view>
							</view>
						</scroll-view>
					</u-popup>
				</view>
				<view class="slot_add">
					<u-popup :show="false" @close="showModel=false" round='30rpx' mode="bottom" :closeable='true'>
						<view style="margin: 24rpx 4%;">
							<view style="display:flex;align-items: flex-start;">
								<image :src="atteritem.image" style="width: 160rpx;height: 160rpx;border-radius: 8rpx;">
								</image>
								<view style="margin-left: 20rpx;">
									<!-- 单独购买   v-if="info.is_start_wholesale==0" -->
									<view class="homeRed flex">
										<view class="">￥<text class="fontS40">{{atteritem.price}}</text></view>
										<view class="flex" v-if="atteritem.end_price">
											<view class="paddingLR24"> — </view>￥<text
												class="fontS40">{{atteritem.end_price}}</text>
										</view>
									</view>
									<!-- 批发 -->
									<!-- <view class="homeRed flex" v-if="info.is_start_wholesale">
										<view class="">￥<text class="fontS40">{{atteritem.wholesale.show_start_price}}</text></view>
										<view class="flex" v-if="atteritem.end_price">
											<view class="paddingLR24"> — </view>￥<text
												class="fontS40">{{atteritem.end_price}}</text>
										</view>
									</view> -->
									<!-- <view class="co9" style="margin-top: 8rpx;">
										有货
									</view> -->
								</view>
							</view>
							<view class="mt32" v-for="(item,index) in info.attr" :key="index">
								<view class="fontS32">
									{{item.attr_name}}
								</view>
								<view class="flex" style="flex-wrap: wrap;">
									<view class="lis" v-for="(itemm,indexx) in item.attrValue" :key="indexx"
										@click="attrLisClick(item,itemm)"
										:class="atter.includes(itemm.id)?'lisactive':''">
										{{itemm.name}}
									</view>
								</view>
							</view>
							<view class="flexJBC mt32">
								<view class="fontS32">
									数量
								</view>
								<u-number-box :min="info.is_start_wholesale==0?1:info.number_wholesale_nunber"
									:max="1000" integer bgColor="#fff" inputWidth='40px' style='height: 48rpx;'
									v-model="num" @change='stepChange'></u-number-box>
							</view>
							<view class="flexJBC fontS24" style="margin-top: 56rpx;"
								v-if="atter.length==info.attr.length">
								<view>
									<text>单价：</text>
									<text class="homeRed">￥</text>
									<text class="fontS40 homeRed">{{atteritem.price}}</text>
								</view>
								<view>
									<text>商品金额：</text>
									<text class="homeRed">￥</text>
									<text class="fontS40 homeRed">{{(atteritem.price*num).toFixed(2)}}</text>
								</view>
							</view>
							<view class=" " @click="addCartOrGoPay" style="margin-top: 44rpx;">
								<u-button class="btn  fontS32 bgcred cof" customStyle="borderRadius:40rpx"
									:disabled="info.attr.length!=atter.length">
									确定
								</u-button>
							</view>
						</view>
					</u-popup>
				</view>
			</view>
		</view>
		<u-loading-page loading-text="loading..." v-else :loading='true' bgColor='#f5f5f5'></u-loading-page>
	</view>
</template>
<script>
	import List from '@/componentes/list.vue'
	export default {
		components: {
			List
		},
		data() {
			return {
				code: 200, //code 为208表示商品失效
				shixiaoTuijianList: [], //失效推荐列表
				type: 1, //1加入购物车  2是立即购买
				atteritem: {}, //当前选中商品规格的数据列表
				atter: [], //当前选中的商品规格
				num: 1, //购买或加入购物车数量
				page: 1,
				findProductComment: '', //评论列表
				swiperCurrent: 1,
				info: {},
				pageLoading: true,
				id: "", //商品id
				showModel: true, //加入购物车和立即购买弹窗
				inputValue: '',
				swiperList: [],
				list: [],
			}
		},
		onLoad(option) {
			this.id = option.id ? option.id : 76;
			this.$my.post('/index/storeComment/findProductComment', {
				page: 1,
				limit: 2,
				product_id: this.id,
			}).then(res => {
				if (res.code == 200) {
					this.findProductComment = res.data
				}
			})
			this.getInfo()
		},
		onReachBottom() {
			if (this.code == 208) {
				this.page++;
				this.getTuijianList()
			}
		},
		methods: {
			stepChange(e) {
				console.log(e)
				if (this.info.is_start_wholesale == 1 && this.atter.length > 0) {
					// 批发
					this.info.wholesale.setting_seller_data.forEach((item, index) => {
						let num = e.value
						console.log(this.num)
						item.big_number = Number(item.big_number)
						item.small_number = Number(item.small_number)
						if ((num > item.small_number) && (num <= item.big_number)) {
							this.atteritem.price = item.wholesale_price
						} else if (num > item.big_number) {
							this.atteritem.price = item.wholesale_price
							console.log(item, index, e, 12, e >= item.small_number)
						}
					})
				}
			},
			// 失效找相似
			getTuijianList() {
				this.$my.post('/index/product/similar/list', {
					page: this.page,
					limit: 10,
					goods_id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.shixiaoTuijianList = this.shixiaoTuijianList.concat(res.data.data)
					}
				})
			},
			// 1加入购物车 或者 2直接购买
			addCartOrGoPay() {
				if (this.info.attr.length == this.atter.length) {
					if (this.type == 1) {
						this.$my.post('/index/cart/store', {
							goods_id: this.info.id,
							num: this.num,
							sku_id: this.atteritem.id
						}).then(res => {
							this.$my.toast(res.message)
						})
					} else {
						// 立即购买   去购买订单页
						let address_id = '';
						this.$my.get('/index/user/get_address').then(res => {
							if (res.code == 200 && res.data.length > 0) {
								res.data.forEach(item => {
									if (item.is_default) {
										address_id = item.id
									}
								})
								address_id = address_id ? address_id : (res.data[0] ? res.data[0].id : '')
							}
							let info = {
								product_id: this.id,
								number: this.num,
								sku_id: this.atteritem.id,
							}
							console.log(info, 9)
							this.$my.go('/pages/my/order/sureOrder?type=2&orderinfo=' + JSON.stringify(info) +
								'&address_id=' + address_id)
						})
					}
					this.showModel = false
				}
			},
			// 点击规格
			attrLisClick(item, itemm) {
				if (!this.atter.includes(itemm.id)) {
					let id;
					this.atter.forEach((val, index) => {
						this.info.attrValue.forEach(val1 => {
							if (val == val1.id) {
								id = val1.attr_id
								if (id == itemm.attr_id) {
									this.atter.splice(index, 1)
									console.log(3, this.atter)
								} else {
									if (!this.atter.includes(itemm.id)) {
										this.atter.push(itemm.id)
									}
								}
							}
							if (!this.atter.includes(itemm.id)) {
								this.atter.push(itemm.id)
								console.log(2, this.atter)
							}
						})
					})
					if (this.atter.length == 0) {
						this.atter.push(itemm.id)
					}
				} else {
					this.atter.forEach((val, index) => {
						if (val == itemm.id) {
							this.atter.splice(index, 1)
							console.log(4, this.atter)
						}
					})
				}

				// 拿规格id
				if (this.atter.length == 2) {
					this.info.attrDetails.forEach(item => {
						let at = item.sku.split(',').map(Number)
						if (JSON.stringify(at.sort()) == JSON.stringify(this.atter.sort())) {
							if (this.info.is_start_wholesale == 0) {
								// 单独购买
								this.atteritem = item
							} else {
								this.atteritem = item
								// 批发
								this.info.wholesale.setting_seller_data.forEach((item, index) => {
									this.number = Number(this.number)
									item.big_number = Number(item.big_number)
									item.small_number = Number(item.small_number)
									if ((this.num >= item.small_number) && (this.num <= item.big_number)) {
										this.atteritem.price = item.wholesale_price
									} else if (this.num > item.big_number) {
										this.atteritem.price = item.wholesale_price
										console.log(item, index, this.num, 12, this.num >= item
											.small_number)
									}
								})
							}
						}
					})
				}
			},
			// 店铺图片  展示没使用
			getstoreGoods(val) {
				if (val) {
					this.page++;
				}
				this.$my.post('/index/Search/searchStoreProduct', {
					store_id: this.info.store_id,
					page: this.page,
					limit: 10,
					is_good: 1
				}).then(res => {
					if (res.code == 200) {
						this.list = this.list.concat(res.data.data)
					}
				})
			},
			getInfo() {
				this.$my.post('/index/productDetail/findProduct', {
					product_id: this.id
				}).then(res => {
					this.pageLoading = false;
					this.code = res.code;
					if (res.code == 208) {
						this.getTuijianList()
					}
					if (res.code == 200) {
						this.info = res.data;
						// 批发 修改最低的购买数量
						if (this.info.is_start_wholesale == 1) {
							this.num = this.info.number_wholesale_nunber
						}
						this.info.content = this.info.content ? this.info.content.replace(/\<img/gi,
							'<img style="max-width:100%;height:auto" ') : '';
						this.atteritem = {
							image: this.info.image,
							price: this.info.is_start_wholesale == 0 ? this.info.price : this.info.wholesale
								.show_start_price,
							end_price: this.info.is_start_wholesale == 0 ? this.info.end_price : this.info
								.wholesale.show_end_price,
						}
						this.getstoreGoods();
						if (this.info.is_video) {
							this.swiperList = this.info.video_link.split(',')
							let sw = this.info.slider_image.split(',')
							this.swiperList = this.swiperList.concat(sw)
						} else {
							this.swiperList = this.info.slider_image.split(',')
						}
					}
				})
			},

			// 收藏  和  取消收藏
			follow() {
				this.$my.post('/index/user/store_follow', {
					id: this.id,
					type: 2
				}).then(res => {
					if (res.message) this.$my.toast(res.message);
					if (res.code == 200) {
						this.getInfo()
					}
				})
			},
		}
	}
</script>
<style>
	page {
		padding-bottom: 80rpx;
	}
</style>
<style lang="scss" scoped>
	/deep/ .u-number-box__minus {
		border-right: 1rpx solid #ccc;
		width: 48rpx;
	}

	/deep/.u-number-box__plus {
		border-left: 1rpx solid #ccc;
		width: 48rpx;
	}

	/deep/ .u-number-box {
		border: 2rpx solid #CCCCCC;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.swiperLi {
		padding: 0rpx 20rpx;
		height: 40rpx;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 20rpx;
		bottom: 24rpx;
		right: 24rpx;
	}

	/deep/.input_right {
		width: 100%;
		// border: 1px solid red;
		height: 80rpx;
		background-color: white;
		box-sizing: border-box;
		padding: 0 20rpx;

	}

	/deep/.u-navbar__content__right {
		left: 10%;
		padding-right: 0;
	}

	.content {
		.top {
			.top_left {
				margin-right: 20rpx;

			}
		}

		.container {
			padding: 44rpx 4% 0;
			background-color: rgb(245, 245, 245);

			.shop {
				.li {
					margin: 0 auto;
					// width: 90%;
					// height: 370rpx;
					background-color: white;
					border-radius: 16rpx;
					padding: 20rpx;
					box-sizing: border-box;

					.li_top {
						height: 80rpx;
						display: flex;



						.box_center {
							height: 100%;
							flex-grow: 1;
							// background-color: pink;
							margin: 0 20rpx;

							.score {
								color: #FFA848;
								margin-left: 8rpx;
							}

							.deal {
								margin-left: 20rpx;
							}
						}

						.box_right {
							.entry {
								width: 96rpx;
								height: 48rpx;
								padding: 0;
								line-height: 48rpx;
								color: $red;
								border: 2rpx solid $red;
								border-radius: 24rpx;
							}
						}
					}

					.li_center {
						height: 190rpx;
						// background-color: red;
						padding-top: 20rpx;
						padding-bottom: 12rpx;

						.li_img {
							min-width: 190rpx;
							height: 190rpx;
							margin-right: 18rpx;
							border-radius: 8rpx;
							overflow: hidden;
							position: relative;

							.money {
								position: absolute;
								width: 96rpx;
								height: 36rpx;
								background-color: rgba(0, 0, 0, 0.6);
								border-radius: 20rpx 0 0 0;
								right: 0;
								bottom: 0;
								color: white;
							}
						}
					}

				}
			}


		}

		.bottom {
			background-color: white;
			// height: 112rpx;
			padding: 16rpx 4%;
			justify-content: space-between;
			box-sizing: border-box;
			position: fixed;
			bottom: 0%;
			width: 100%;

			.bottom_btn {
				// width: 400rpx;
				// display: flex;
				// justify-content: space-between;

				button {
					margin: 0;
					border-radius: 68rpx;
					color: white;
				}

				.add {
					background-color: #FFC047;
				}

				.topay {
					background-color: $red;
				}
			}
		}

		.slot {
			background-color: white;

			.slot_title {
				margin: 0 4%;
			}

			.li {
				height: 88rpx;
				margin: 0 4%;
				background-color: white;
				line-height: 88rpx;
				border-bottom: 2rpx solid #f1f1f1;

				&:last-child {
					margin-bottom: 110rpx;
				}
			}
		}

		.slot_add {
			.lis {
				height: 64rpx;
				line-height: 64rpx;
				margin-top: 20rpx;
				background: #EEEEEE;
				padding: 0 20rpx;
				box-sizing: border-box;
				border-radius: 32rpx;
				border: 1px solid #eee;
				margin-right: 24rpx;
				min-width: 120rpx;
				text-align: center;
			}

			.lisactive {
				background: #FFF4F4;
				border: 1px solid #DD2131
			}

		}


	}
</style>
